<template>

    <Form :model="formItem" :label-width="84">
        <FormItem label="模板名称">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem label="图片">
            <Upload action="//jsonplaceholder.typicode.com/posts/">
                <Button type="ghost" icon="ios-cloud-upload-outline">选择上传文件</Button>
            </Upload>
        </FormItem>
        <FormItem label="二维码位置">
            <div style="width:150px;height:250px;border: 1px solid #000000 "></div>
            <span>横向： </span>
            <RadioGroup v-model="disabledGroup">
                <Radio label="靠左"></Radio>
                <Radio label="居中"></Radio>
                <Radio label="靠右"></Radio>
            </RadioGroup>
            <br/>
            <span>纵向： </span>
            <RadioGroup v-model="disabledGroup">
                <Radio label="靠上"></Radio>
                <Radio label="居中"></Radio>
                <Radio label="靠下"></Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="模板状态">
            <i-switch v-model="formItem.switch" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
        </FormItem>
        <FormItem label="排序">
            <Input style="width:80%"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary">保存</Button>
        </FormItem>
    </Form>
</template>
<script>
    export default {
        data () {
            return {
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                },
                disabledGroup: ''
            }
        }
    }
</script>
